<template>
  <div class="main">
    <div class="content">
      <div class="wrapper">
        <div class="page">
          <div class="head">
            <div class="tit">{{ $t('pay.bank_tit_head') }}</div>
            <div class="text-desc" v-for="(item, index) in textArr" :key="index">
              {{ item.content }}
            </div>
          </div>
          <!-- 银行汇款流程 -->
          <div class="info-list">
            <div class="top-sty">
              <div class="dot">
                <div class="bg">1</div>
              </div>
              <div style="margin-left: 24px;">
                <div class="flow-tit">{{ $t('pay.flow_tit1') }}</div>
              </div>
            </div>
            <div class="content-sty">
              <div class="info">
                <div class="info-text">{{ $t('pay.flow_sub_tit1') }}</div>
                <div class="received-tit">{{ $t('promote.received_people_info') }}</div>
                <div class="received-rect">
                  <div class="label mar-sty">{{ $t('pay.label_bank_text1') }}：</div>
                  <div class="list-sty">
                    <div class="left">{{ dataInfo.receiverName }}</div>
                    <div class="right" @click="onCopy(dataInfo.receiverName)">{{ $t('user.copy') }}</div>
                  </div>
                  <div class="label">{{ $t('pay.received_user_no') }}：</div>
                  <div class="list-sty">
                    <div class="left">{{ dataInfo.receiverNo }}</div>
                    <div class="right" @click="onCopy(dataInfo.receiverNo)">{{ $t('user.copy') }}</div>
                  </div>
                  <div class="label">{{ $t('pay.received_bank') }}：</div>
                  <div class="list-sty">
                    <div class="left">{{ dataInfo.receiverBankAddress }}</div>
                    <div class="right" @click="onCopy(dataInfo.receiverBankAddress)">{{ $t('user.copy') }}</div>
                  </div>
                  <div class="label">{{ $t('pay.open_bank_text') }}：</div>
                  <div class="list-sty">
                    <div class="left">{{ dataInfo.receiverBank }}</div>
                    <div class="right" @click="onCopy(dataInfo.receiverBank)">{{ $t('user.copy') }}</div>
                  </div>
                  <div class="label">{{ $t('pay.bank_code') }}：</div>
                  <div class="list-sty">
                    <div class="left">{{ dataInfo.bankCode }}</div>
                    <div class="right" @click="onCopy(dataInfo.bankCode)">{{ $t('user.copy') }}</div>
                  </div>
                  <div class="label">{{ $t('pay.open_bank_address') }}：</div>
                  <div class="list-sty">
                    <div class="left">{{ dataInfo.bankAddress }}</div>
                    <div class="right" @click="onCopy(dataInfo.bankAddress)">{{ $t('user.copy') }}</div>
                  </div>
                  <div class="label">{{ $t('pay.open_bank_reduction') }}：</div>
                  <div class="list-sty">
                    <div class="left">{{ dataInfo.receiverBankSwiftCode }}</div>
                    <div class="right" @click="onCopy(dataInfo.receiverBankSwiftCode)">{{ $t('user.copy') }}</div>
                  </div>
                  <div class="label">{{ $t('pay.supported_currencies') }}：</div>
                  <div class="list-sty">
                    <div class="left gray-text">{{ dataInfo.currencyCode }}</div>
                    <div class="right"></div>
                  </div>
                </div>
                <div class="text-tip">{{ $t('pay.tip_text_rig') }}</div>
              </div>
            </div>
          </div>
          <div class="info-list">
            <div class="top-sty">
              <div class="dot">
                <div class="bg">2</div>
              </div>
              <div style="margin-left: 24px;">
                <div class="flow-tit">{{ $t('pay.flow_tit2') }}</div>
              </div>
            </div>
            <div class="content-sty no-border">
              <div class="info" style="padding-bottom: 42px;">
                <div class="info-text" style="margin-bottom: 16px;">{{ $t('pay.flow_sub_tit2') }}</div>
                <div class="received-rect">
                  <div class="list-info">
                    <div class="top-tit"><span class="imp-icon">*</span>{{ $t('pay.give_user_name') }}</div>
                    <Input v-model="formValidate.transferName" :placeholder="$t('pay.tip_input_text')"
                      style="width: 744px;"></Input>
                  </div>
                  <div class="list-info">
                    <div class="top-tit"><span class="imp-icon">*</span>{{ $t('pay.remittance_bank') }}</div>
                    <Input v-model="formValidate.transferBank" :placeholder="$t('pay.tip_give_bank_text')"
                      style="width: 744px;"></Input>
                  </div>
                  <div class="list-info">
                    <div class="top-tit"><span class="imp-icon">*</span>{{ $t('pay.remittance_credentials') }}</div>
                    <Input v-model="formValidate.transferNo" :placeholder="$t('pay.tip_give_no_text')"
                      style="width: 744px;"></Input>
                  </div>
                  <div class="list-info">
                    <div class="top-tit"><span class="imp-icon">*</span>{{ $t('pay.give_currency') }}</div>
                    <Select v-model="formValidate.currencyCode" class="select-sty">
                      <Option v-for="(item, index) in currencyList" :key="index" :value="item.code">{{ item.code }}
                      </Option>
                    </Select>
                  </div>
                  <div>
                    <div class="flex-sty">
                      <div class="list-info" style="margin-bottom: 0;">
                        <div class="top-tit"><span class="imp-icon">*</span>{{ $t('pay.remittance_amount') }}</div>
                        <Input v-model="formValidate.transferAmount" :placeholder="$t('pay.tip_give_amount_text')"
                          class="select-sty" @on-blur="changeMet(formValidate.transferAmount)"></Input>
                      </div>
                      <img src="@/assets/images/user/concat.png" class="concat-sty" alt="">
                      <div class="list-info" style="margin-bottom: 0;">
                        <div class="top-tit">{{ $t('pay.handlingCharge') }}</div>
                        <div class="sep-sty">
                          <div class="left">{{ formValidate.handleFee }}</div>
                          <div class="right">{{ formValidate.currencyCode }}</div>
                        </div>
                      </div>
                    </div>
                    <div class="currency-text">
                      {{ $t('pay.about_text') }}≈ <span class="amount-num">{{ userCurrency.code }} {{ balanceAmount || 0
                        }}</span>
                      <Tooltip :content="$t('pay.tip_content_txt')" transfer max-width="330" placement="right">
                        <Icon type="ios-help-circle-outline" class="icon-desc" />
                      </Tooltip>
                    </div>
                  </div>
                  <div class="list-info">
                    <div class="top-tit"><span class="imp-icon">*</span>{{ $t('pay.give_upload_text') }}</div>
                    <Upload :show-upload-list="false" :headers="{
                      'X-Access-Token': userToken,
                      'lang': 'en_US'
                    }" biz="chat" :data="{
                      biz: 'custom'
                    }" name="file" :disabled="uploadLoading" :max-size="3072"
                      :before-upload="() => handleBeforeUpload()" :on-success="(response) => onSuccess(response)"
                      :on-exceeded-size="() => handleMaxSize(file)" :action="uploadURL" :accept="'.png,.jpg,.jpeg'">
                      <div class="loading-wrap" v-if="uploadLoading">
                        <t-loading></t-loading>
                      </div>
                      <div v-if="formValidate.transferImage != '' && !uploadLoading" class="preview-img">
                        <img class="upload-image" :src="formValidate.transferImage" alt="" />
                        <img src="@/assets/images/public/delete.png" class="delete-icon" @click="removeMet($event)"
                          alt="">
                        <div class="overlay"></div>
                      </div>
                      <div v-if="!formValidate.transferImage & !uploadLoading" class="upload-sty">
                        <img src="@/assets/images/home/add.png" class="upload-img" alt="">
                      </div>
                    </Upload>
                    <div class="exp-txt" @click="lookMet()">{{ $t('pay.look_exp_txt') }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="footer-sty">
            <div class="sub-text">{{ $t('pay.pay_text_content_tip') }}</div>
            <div class="write-rect">
              <div class="handle-sty">
                <div class="back-btn" @click="backJump()">{{ $t('pay.back_btn_text') }}</div>
                <div :class="comFormVal ? 'sub-btn' : 'default-btn'" @click="comFormVal ? onSubmit() : unSubmit()">{{
                  $t('pay.sub_btn_text') }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <examples-pop ref="examplesRef"></examples-pop>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getTransferInfo, getTransferAmount } from "@/api/pay";
import { commonUpload } from "@/api/sys";
import TLoading from "@/components/t-loading";
import { getTransferSubmit } from "@/api/pay";
import ExamplesPop from './compontents/examples-pop.vue';
export default {
  components: { TLoading, ExamplesPop },
  data() {
    return {
      textArr: [
        { content: this.$t('pay.bank_tip_text1') },
        { content: this.$t('pay.bank_tip_text2') },
        { content: this.$t('pay.bank_tip_text3') },
        { content: this.$t('pay.bank_tip_text4') },
        { content: this.$t('pay.bank_tip_text5') },
      ],
      dataInfo: {},
      balanceAmount: '',
      formValidate: {
        transferName: '',
        transferBank: '',
        transferNo: '',
        currencyCode: 'EUR',
        transferImage: '',
        handleFee: '0'
      },
      uploadLoading: false,
      userToken: localStorage.getItem("USER_TOKEN"),
      uploadURL: commonUpload(),
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency,
      currencyList: (state) => {
        // 币种列表
        let list = [];
        if (state.config.config) {
          list = state.config.config.currencyList;
        }
        // 过滤掉 code 为 CNY 的元素
        list = list.filter(item => item.code !== 'CNY');
        return list;
      }
    }),
    comFormVal() {
      return this.formValidate.transferName != '' && this.formValidate.transferBank != '' && this.formValidate.currencyCode != '' && this.formValidate.transferAmount > 21 && this.formValidate.transferImage != '' && this.formValidate.transferNo != '' ? true : false;
    }
  },
  created() {
    this.getInfo();
  },
  methods: {
    lookMet() {
      this.$refs.examplesRef.open();
    },
    getInfo() {
      getTransferInfo().then((res) => {
        this.dataInfo = res.result;
      })
    },
    handleMaxSize(file) {
      this.uploadLoading = false;
      this.$Message.error(`File ${file.name} is too large, no more than 3M.`);
    },
    onSuccess(response) {
      // 上传成功
      this.uploadLoading = false;
      if (response.code == 0 || response.code == 200 || response.code == 201) {
        let data = response.result;
        this.formValidate.transferImage = data.url;
      } else {
        this.$Message.error(response.message);
      }
    },
    onError() {
      this.$webToastObj({
        message: this.$t('user.uploadFailure'),
        time: 2000
      });
    },
    handleBeforeUpload() {
      this.uploadLoading = true;
    },
    removeMet(event) {
      event.stopPropagation();
      // 删除图片
      this.formValidate.transferImage = '';
    },
    onCopy(content) {
      // 复制地址
      let _this = this;
      this.$copyText(content).then(function () {
        _this.$Message.success(_this.$t('public.copySuccess'));
      }, function () {
        _this.$Message.error(_this.$t('public.copyFail'));
      })
    },
    changeMet(val) {
      if (val) {
        const regex = /^\d+$/;
        if (!regex.test(this.formValidate.transferAmount)) {
          this.$Message.error(this.$t('pay.amount_typeof_tip_text'));
          return;
        } else {
          if (val < 20) {
            this.$Message.error(this.$t('pay.amount_tip_text'));
          }

          let obj = {
            amount: val,
            currencyCode: this.formValidate.currencyCode
          }
          getTransferAmount(obj).then((res) => {
            this.balanceAmount = res.result.rechargeAmount;//充值到余额的金额
            this.formValidate.handleFee = res.result.serviceFee;//手续费
          })
        }
      } else {
        this.balanceAmount = '0';//充值到余额的金额
        this.formValidate.handleFee = '0';//手续费
        this.$Message.error(this.$t('pay.tip_give_amount_text'));
      }
    },
    unSubmit() {
      if (!this.formValidate.transferName) {
        this.$Message.error(this.$t('pay.tip_input_text'));
        return;
      }

      if (!this.formValidate.transferBank) {
        this.$Message.error(this.$t('pay.tip_give_bank_text'));
        return;
      }

      if (!this.formValidate.transferNo) {
        this.$Message.error(this.$t('pay.tip_give_no_text'));
        return;
      }

      if (!this.formValidate.transferAmount) {
        this.$Message.error(this.$t('pay.tip_give_amount_text'));
        return;
      }

      if (!this.formValidate.transferImage) {
        this.$Message.error(this.$t('pay.image_tip_txt'));
        return;
      }

      if (this.formValidate.transferAmount < 21) {
        this.$Message.error(this.$t('pay.amount_tip_text'));
        return;
      }
    },
    onSubmit() {
      getTransferSubmit(this.formValidate).then((res) => {
        if (res.code == 200) {
          this.$Message.success(this.$t('pay.give_success_tip_text'));
          this.formValidate.transferName = '';
          this.formValidate.transferBank = '';
          this.formValidate.transferNo = '';
          this.formValidate.currencyCode = 'EUR';
          this.formValidate.transferAmount = '';
          this.formValidate.handleFee = '0';
          this.balanceAmount = '0';
          this.formValidate.transferImage = '';
          this.$router.push('/user/assets')
        }
      })
    },
    backJump() {
      this.formValidate.transferName = '';
      this.formValidate.transferBank = '';
      this.formValidate.transferNo = '';
      this.formValidate.currencyCode = 'EUR';
      this.formValidate.transferAmount = '';
      this.formValidate.handleFee = '0';
      this.balanceAmount = '0';
      this.formValidate.transferImage = '';
      this.$router.go(-1);
    }
  }
}
</script>
<style lang="less" scoped>
.main {

  .content {
    background: #FFFFFF;
    min-height: 300px;

    .wrapper {
      position: relative;
      margin: 32px 160px 0 160px;

      .page {
        .head {
          background: #F7F9FC;
          border-radius: 8px 8px 8px 8px;
          padding: 24px;
          margin-bottom: 48px;

          .tit {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 20px;
            color: #1E1714;
            line-height: 23px;
          }

          .text-desc {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #767B93;
            line-height: 19px;
            margin-top: 20px;
          }
        }

        .info-list {

          .top-sty {
            display: flex;
            align-items: center;
            margin-bottom: 8px;

            .dot {
              width: 40px;
              height: 40px;
              background: #FF186B;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;

              .bg {
                color: #FFFFFF;
                font-size: 19px;
                line-height: 40px;
              }
            }

            .flow-tit {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 20px;
              color: #1E1714;
              line-height: 23px;
            }
          }

          .content-sty {
            padding-left: 50px;
            margin-bottom: 8px;
            margin-left: 20px;
            border-left: 2px solid #FF186B;

            .line-sty {
              width: 1px;
              height: 100%;
              border: 1px dashed #DDDFE6;
            }

            .info {
              padding-bottom: 16px;

              .info-text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 16px;
                color: #767B93;
                line-height: 19px;
                margin-bottom: 30px;
              }

              .received-tit {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 20px;
                color: #1E1714;
                line-height: 23px;
                margin-bottom: 16px;
              }

              .received-rect {
                border-radius: 8px 8px 8px 8px;
                border: 2px dashed #E9EAF3;
                padding: 40px 40px 0 40px;

                .list-info {
                  margin-bottom: 40px;

                  :deep(.ivu-input) {
                    height: 46px;
                    border-radius: 4px 4px 4px 4px;
                    border: 1px solid #E9EAF3;
                    font-size: 18px;
                    line-height: 46px;
                  }

                  .top-tit {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 18px;
                    color: #1E1714;
                    line-height: 24px;
                    margin-bottom: 12px;

                    .imp-icon {
                      color: #FF186B;
                    }
                  }

                  .preview-img {
                    position: relative;
                    cursor: pointer;

                    .upload-image {
                      width: 132px;
                      height: 132px;
                      border-radius: 3px;
                    }

                    .overlay {
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 132px;
                      height: 132px;
                      display: block;
                      border-radius: 3px;
                      background-color: rgba(0, 0, 0, 0.1);
                    }

                    .delete-icon {
                      display: none;
                    }
                  }

                  .preview-img:hover>.overlay {
                    display: block;
                    border-radius: 3px;
                    background-color: rgba(0, 0, 0, 0.5);
                  }

                  .preview-img:hover>.delete-icon {
                    display: block;
                    width: 24px;
                    height: 24px;
                    position: absolute;
                    top: 54px;
                    left: 54px;
                    z-index: 2,
                  }

                  .upload-sty {
                    width: 132px;
                    height: 132px;
                    border-radius: 3px;
                    background: #F9F9F9;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    position: relative;

                    .upload-img {
                      width: 48px;
                      height: 48px;
                    }
                  }
                }

                .flex-sty {
                  display: flex;
                  align-items: center;
                  gap: 16px;

                  .list-info {
                    margin-bottom: 40px;

                    :deep(.ivu-input) {
                      height: 46px;
                      border-radius: 4px 4px 4px 4px;
                      border: 1px solid #E9EAF3;
                      font-size: 18px;
                      line-height: 46px;
                    }

                    .top-tit {
                      font-family: PingFang SC, PingFang SC;
                      font-weight: 500;
                      font-size: 18px;
                      color: #1E1714;
                      line-height: 24px;

                      .imp-icon {
                        color: #FF186B;
                      }
                    }
                  }

                  .ivu-form-item {
                    margin-bottom: 8px;
                  }

                  .sep-sty {
                    min-width: 184px;
                    height: 46px;
                    border-radius: 4px 4px 4px 4px;
                    border: 1px solid #E9EAF3;
                    display: flex;
                    align-items: center;

                    .left {
                      min-width: 102px;
                      padding: 12px 20px;
                      font-family: PingFang SC, PingFang SC;
                      font-weight: 500;
                      font-size: 16px;
                      color: #AEB0B9;
                      line-height: 19px;
                      background: #F7F9FC;
                    }

                    .right {
                      padding: 12px 24px;
                      border-left: 1px solid #E9EAF3;
                      font-family: PingFang SC, PingFang SC;
                      font-weight: 500;
                      font-size: 16px;
                      color: #AEB0B9;
                      line-height: 19px;
                      background: #F7F9FC;
                    }
                  }

                  .concat-sty {
                    width: 24px;
                    height: 24px;
                    margin-top: 28px;
                  }
                }

                .currency-text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 16px;
                  color: #1E1714;
                  line-height: 19px;
                  margin-bottom: 40px;
                  margin-top: 8px;

                  .amount-num {
                    color: #FF196B;
                  }

                  .icon-desc {
                    color: #000000;
                    font-size: 21px;
                    font-weight: 600;
                    cursor: pointer;
                    margin-left: 7px;
                  }
                }

                .label {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 18px;
                  color: #1E1714;
                  line-height: 24px;
                  margin-bottom: 12px;
                  margin-top: 20px;
                }

                .mar-sty {
                  margin-top: 0px;
                }

                .list-sty {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  padding-bottom: 20px;
                  border-bottom: 1px solid #E9EAF3;

                  .left {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 18px;
                    color: #1E1714;
                    line-height: 24px;
                  }

                  .gray-text {
                    color: #767B93;
                  }

                  .right {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 18px;
                    color: #FF186B;
                    line-height: 24px;
                    cursor: pointer;
                  }
                }

                .select-sty {
                  width: 268px;

                  :deep(.ivu-select-selection) {
                    height: 46px;
                    border-radius: 4px 4px 4px 4px;
                  }

                  :deep(.ivu-select-selected-value) {
                    font-size: 18px;
                    line-height: 46px;
                  }
                }

                .exp-txt {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 16px;
                  color: #FF186B;
                  line-height: 19px;
                  margin-top: 12px;
                  cursor: pointer;
                }
              }

              .text-tip {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #767B93;
                line-height: 19px;
                text-align: right;
                margin-top: 20px;
              }
            }
          }

          .no-border {
            border: none;
          }
        }

        .footer-sty {
          border: 1px solid #FFEAF2;
          border-radius: 12px 12px 0 0;
          background: #FFEAF2;
          padding-top: 17px;
          position: sticky;
          bottom: 0;
          z-index: 2;

          .sub-text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FF186B;
            line-height: 16px;
            margin: 0 20px;
          }

          .write-rect {
            background: #FFFFFF;
            border-radius: 12px 12px 0 0;
            padding: 20px 48px;
            margin-top: 17px;
            display: flex;
            justify-content: end;

            .handle-sty {
              display: flex;
              gap: 24px;

              .back-btn {
                min-width: 158px;
                height: 52px;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #FF186B;
                cursor: pointer;
                padding: 0 52px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 18px;
                color: #FF186B;
                line-height: 52px;
                text-align: center;
              }

              .default-btn {
                min-width: 176px;
                height: 52px;
                background: #AEB0B9;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #FFFFFF;
                padding: 0 52px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 52px;
                text-align: center;
                cursor: pointer;
              }

              .sub-btn {
                min-width: 176px;
                height: 52px;
                background: #FF186B;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #FFFFFF;
                cursor: pointer;
                padding: 0 52px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 52px;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
</style>